<template>
    <div ref="item" draggable="true"  :title="props.fItem.fileName" class="fileitem">
        <div>
            <FileIcon v-if="!props.fItem.folderFlag"></FileIcon>
            <FolderIcon v-else></FolderIcon>
        </div>
        <div style="width: 80%;height: 2.8rem;overflow: hidden;">
            <el-text  truncated>
                {{ props.fItem.fileName }}
  </el-text>
            </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import FileIcon from './icon/FileIcon.vue'
import FolderIcon from './icon/FolderIcon.vue';
const props = defineProps<{
    fItem: FItem
}>()
const emit = defineEmits<{
    (e: 'startDrag', item: FItem): void
    (e: 'endDrag', item: FItem): void
}>()
const item = ref<HTMLDivElement>()

onMounted(() => {
    if (props.fItem.folderFlag) {
        item.value?.addEventListener('dragover', (e) => {
            item.value!.style.backgroundColor = 'rgb(165, 160, 153)';
        })
        item.value!.addEventListener('dragleave', (e) => {
            item.value!.style.backgroundColor = ''
        })
        item.value!.addEventListener('drop', (e) => {
            emit('endDrag', props.fItem)
            item.value!.style.backgroundColor = ''
        })
    }
    item.value?.addEventListener('dragstart', (e) => {
        emit('startDrag', props.fItem)
    })
})

</script>
<style scoped>
.fileitem {
    height: 140px;
    width: 100px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
}

.fileitem:hover {

    background-color: rgb(165, 160, 153);
}
</style>